<template>
    <view>
        <view class="plugins-realstore-data-list oh">
            <block v-for="(item, index) in storeList" :key="index">
                <view class="item bg-white padding-main border-radius-main pr spacing-mb">
                    <view class="base oh">
                        <!-- 基础内容 -->
                        <image src="../../static/images/hero.png" mode="widthFix" class="logo circle fl br" ></image>
                        <view class="base-right fr">
                            <view class="status-icon text-size-xs pa bg-main cr-white">{{item.msg}}</view>
                           <view class="title fw-b text-size single-text">
                                <text class="va-m">{{item.name}}</text>
                            </view>
                           <view class="margin-top-sm text-size-xs cr-grey">
                                <view>营业时间：{{item.time}}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 地址 -->
                    <view class="margin-top-xs oh">
                        <view class="dis-inline-block va-m">
                            <uni-icons type="location-filled" size="20" color="#8d8d8d"></uni-icons>
                        </view>
                        <view class="address-content single-text cr-base margin-left-xs dis-inline-block text-size-sm va-m" :data-value="item.province_name+item.city_name+item.county_name+item.address" @tap.stop="text_copy_event">{{item.province_name}}{{item.city_name}}{{item.county_name}}{{item.address}}</view>
                    </view>
                    <!-- 右侧操作 -->
                   <view class="icon-list pa">
                       <view class="icon-item bg-blue circle dis-inline-block tc" :data-index="index" @tap.stop="address_map_event">
                           <uni-icons type="paperplane-filled" size="18" color="#fff"></uni-icons>
                       </view>
                        <view class="icon-item bg-yellow circle dis-inline-block tc" :data-value="item.service_tel" @tap.stop="tel_event">
                            <uni-icons type="phone-filled" size="18" color="#fff"></uni-icons>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            };
        },
        components: {},
        props: {
            storeList: {
            	type: Array,
            	default: []
            }
        },
        // 属性值改变监听
        watch: {
        },
        // 页面被展示
        created: function(e) {        
        },
        methods: {
            // 收藏事件
            favor_event(e) {
                
            },
            
            // 剪切板
            text_copy_event(e) {
                let value = e.currentTarget.dataset.value
                if (value != null) {
                    uni.setClipboardData({
                        data: value,
                        success(res) {
                            uni.getClipboardData({
                                success(res) {
                                    uni.showToast({title: '复制成功', icon:"none"});
                                }
                            });
                        }
                    });
                } else {
                    uni.showToast({title: '复制内容为空', icon:"none"});
                }
            },
            
            // 地图查看
            address_map_event(e) {
                let info = this.storeList[e.currentTarget.dataset.index];
                if (info.lat == 0 || info.lng == 0) {
                    uni.showToast({title:"地址有误", icon:"none"});
                    return false;
                }
                // 打开地图
                let address = (info.province_name || '') + (info.city_name || '') + (info.county_name || '') + (info.address || '');
                // 转换坐标打开位置
                uni.openLocation({
                    address: address || '',
                    scale: 18,
                    longitude: parseFloat(info.lng),
                    latitude: parseFloat(info.lat)
                });
            },
            
            // 电话
            tel_event(e) {
                let phone = e.currentTarget.dataset.value
                if ((phone || null) != null) {
                    uni.makePhoneCall({
                        phoneNumber: phone.toString(),
                        fail(e){
                            console.log(e)
                        }
                    });
                }
            }
        }
    };
</script>
<style>
    /**
    * 门店 - 数据列表
    */
    .plugins-realstore-data-list .item .address-content {
        width: calc(100% - 220rpx);
    }
    .plugins-realstore-data-list .item .icon-list {
        right: 20rpx;
        bottom: 20rpx;
    }
    .plugins-realstore-data-list .item .icon-list .icon-item {
        width: 50rpx;
        height: 50rpx;
        line-height: 50rpx;
    }
    .plugins-realstore-data-list .item .icon-item .badge-icon {
        top: -10px;
        right: 2px;
    }
    .plugins-realstore-data-list .item .icon-list .icon-item:not(:last-child) {
        margin-right: 15rpx;
    }
    .plugins-realstore-data-list .item .logo {
        width: 100rpx;
        height: 100rpx !important;
    }
    .plugins-realstore-data-list .item .base-right {
        width: calc(100% - 130rpx);
    }
    .plugins-realstore-data-list .item .base-right .title {
        width: calc(100% - 110rpx);
    }
    .plugins-realstore-data-list .item .base-right .status-icon {
        border-top-left-radius: 50rpx;
        border-bottom-left-radius: 50rpx;
        top: 20rpx;
        right: -1px;
        padding: 5rpx 20rpx;
        box-shadow: -1px 1px 3px rgb(0 0 0 / 10%);
        font-size: 22rpx
    }
</style>